<template>
  <view class="">
    <image
      src="https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/eidt_4743235770.png"
      style="width:32rpx; height:32rpx; vertical-align: bottom;"
      @click.stop="visible = true"
    ></image>
    <view class="signaturebox" v-if="visible">
      <view class="signatureboxheader" :style="{top:`${signatureTop!==undefined?signatureTop:this.statusBarHeight+44}px`}">
        <view class="signatureboxheaderli" @click="closeClick">
          <image class="signatureboxheaderlii0 signatureboxheaderlii1" src="https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/close_4837171629.png"></image>
        </view>
        <view class="signatureboxheaderli" @click="gotoClick">
          <image class="signatureboxheaderlii0" src="https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/cancel_2636787548.png"></image>
        </view>
        <view class="signatureboxheaderli" @click="clearClick">
          <image class="signatureboxheaderlii0 signatureboxheaderlii3" src="https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/clear_9581512539.png"></image>
        </view>
      </view>
      <l-signature
        disableScroll
        ref="signatureRef"
        penColor="red"
        :penSize="3"
        :openSmooth="this.openSmooth"
      >
      </l-signature>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    signatureTop: Number,
  },
  data() {
    return {
      visible: false,
      title: 'Hello',
      openSmooth: true,
      statusBarHeight: 0,
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    closeClick() {
      this.visible = false
    },
    gotoClick() {
      this.$refs.signatureRef.undo();
    },
    clearClick() {
      this.$refs.signatureRef.clear();
    }
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight =  res.statusBarHeight || 0;
      }
    });
  },
}
</script>

<style lang="scss">
	.signaturebox{
		position:fixed;
		left:0;
		top:0;
		bottom:0;
		right:0;
		z-index: 999;
	}
	.signatureboxheader{
		position: absolute;
		top:0;
		left: 0;
		right:0;
		z-index: 2;
		display: flex;
		height: 58px;
		background: #353743;
		border-radius: 0px 0px 15px 15px;
	}
	.signatureboxheaderli{
		padding: 10px;
		flex:1;
		text-align: center;
		line-height: 38px;
	}
	.signatureboxheaderlii0{
		width:25px;
		height: 25px;
		position: relative;
		top: 5px;
	}
	.signatureboxheaderlii1{
		width: 18px;
		height: 18px;
		position: relative;
		top:3px;
	}
	.signatureboxheaderlii3{
		width:26px;
		height: 26px;
	}
</style>